<template>
	<!-- 首页 -->
	<view class="content">
		<view class="base-page-bg-img"><image class="img" src="/static/image/hszg.png" mode="aspectFit"></image></view>
		<nav-bar @cutClick="cutClick" :leftText="$store.getters.getKeMuName" topbgColor="#FFE8CA" :opacity="topOpacity"></nav-bar>
		<view class="num-accuracy">
			<swiper class="swiper" autoplay :interval="3000" circular vertical disable-touch>
				<swiper-item>
					<view class="swiper-item">今日刷题<view class="n">{{INDEXDATA.todayCount || 0}}道</view></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">距离考试<view class="n">{{$common.getDaysFromDate(getKeMuItem?.endTime)}}天</view></view>
				</swiper-item>
			</swiper>
			<view class="accuracy"><image class="img" src="../../static/image/svg/1933.svg" mode="aspectFit"></image>正确率{{INDEXDATA.todayRightPercent}}%</view>
		</view>
		<view class="passing-rate">
			<view class="num"><view class="n">{{INDEXDATA.workCount || 0}}/{{INDEXDATA.subjectCount || 0}}</view>道</view>
			<view class="rate-con">预测通过率<view class="rate">
				<view class="big">{{splitNumber(INDEXDATA.passRate).integer || '0'}}
				</view>{{splitNumber(INDEXDATA.passRate).decimal}}%</view>
			</view>
		</view>
		<view class="line-style" :class="[lineColor(INDEXDATA.passRate).className]"><view class="r" :style="{'left': (INDEXDATA.passRate>95 ? 95 : INDEXDATA.passRate)+'%'}"></view></view>
		<view class="forecast-msg">{{lineColor(INDEXDATA.passRate).t1}}<span class="s">{{lineColor(INDEXDATA.passRate).t2}}</span></view>
		<view class="ai-accuracy">
			<view class="svg-img">
				<image class="img" :src="$common.userMainImg()" mode="aspectFit"></image>
				<view class="text" @click="aiClick">{{aiText.msg || '点击每日提升，生成定制题目'}}</view>
			</view>
			<view class="title">
				<view class="left">陶老师AI智能刷题</view>
				<view class="right" @tap="rightWork" :class="{'meet': INDEXDATA.workCount>=100}">刷题报告<view class="iconfont icon-fanhui base-fanhui"></view></view>
			</view>
			<view class="message">智能分析刷题数据，私人定制化刷题方案</view>
			<view class="list">
				<view class="item" @click="goAccuracy('1')">
					<view class="img-text">
						<view class="num">{{INDEXDATA.errorReplayRate}}</view>
						<image class="img" src="../../static/image/svg/2317.svg" mode="aspectFit"></image>
					</view>
					<view>错题攻克</view>
				</view>
				<view class="item" @click="goAccuracy('2')">
					<view class="img-text">
						<view class="num">99%</view>
						<image class="img" src="../../static/image/svg/2316.svg" mode="aspectFit"></image>
					</view>
					<view>章节强化</view>
				</view>
				<view class="item" @click="goAccuracy('3')">
					<view class="img-text">
						<image class="img" src="../../static/image/svg/2315.svg" mode="aspectFit"></image>
					</view>
					<view>每日提升</view>
				</view>
			</view>
		</view>
		<view class="selection">
			<view class="title">
				<view class="left" @tap="uni.navigateTo({ url: `/pagesA/aiAccuracy/analyse` })">陶老师精选</view>
				<view class="right" @tap="goQuestion"><view>更多</view><view class="iconfont icon-fanhui base-fanhui"></view></view>
			</view>
			<view class="list-block">
				<view @tap="goQuestion('核心999题')" class="item">
					<image class="img" src="../../static/image/svg/2332.svg" mode="aspectFit"></image>
					<view>核心999题</view>
				</view>
				<view @tap="goQuestion('历年真题')" class="item">
					<image class="img" src="../../static/image/svg/2333.svg" mode="aspectFit"></image>
					<view>历年真题</view>
				</view>
				<view @tap="goQuestion('考前必刷')" class="item">
					<image class="img" src="../../static/image/svg/2330.svg" mode="aspectFit"></image>
					<view>考前必刷</view>
				</view>
				<view @tap="goMistakes" class="item">
					<image class="img" src="../../static/image/svg/2331.svg" mode="aspectFit"></image>
					<view>错题/收藏</view>
				</view>
				<view @tap="goAiAccuracy" class="item">
					<image class="img" src="../../static/image/svg/23.svg" mode="aspectFit"></image>
					<view>
						<view>万人模拟考</view>
						<view class="text">由AI模拟真实试卷，有效评估自身分数</view>
					</view>
				</view>
				<view @tap="goToMini" class="item">
					<view>人机<br>模拟</view>
				</view>
			</view>
		</view>
		<bottomBindPhone btnType="btn1" @callback="bindCallback"></bottomBindPhone>
		
		<div class="base-ai-modal">
			<div class="shadow"></div>
			<div class="modal-content">
				<div class="close-btn" @click="aiModalShow=false"></div>
				<div class="title">请先登录</div>
				<div class="text">该功能需要记录/读取您的历史记录，请先登录后使用</div>
				<div class="btn" @click="goLogin">登录</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {banner,indexData,indexDataNotLogin} from '@/api/index.js'
	import bottomBindPhone from "@/components/bottomBindPhone.vue"
	import pageScrollMixin  from "@/mixins/pageScrollMixin.js"
	export default {
		mixins: [pageScrollMixin],
		components: {
			bottomBindPhone
		},
		data() {
			return {
				INDEXDATA: {},
				aiText: {
					msg: '',
					type: '',
				},
				aiModalShow: false,
			}
		},
		onShareAppMessage(){
			return {
			    title: '陶老师Ai刷题',
			}
		},
		onShareTimeline(){
			return {
			    title: '陶老师Ai刷题',
			}
		},
		watch: {
			loginInfo:{
				handler(newVal){
					this.requestInit()
				},
				deep: true,
				immediate: true
			},
			getKeMuId: {
				handler(newVal){
					this.requestInit()
				},
				deep: true
			},
			homeDataUpdata: {
				handler(newVal){
					if(newVal){
						this.requestInit()
					}else{
						this.$store.commit('set',['homeDataUpdata',false])
					}
				},
				deep: true
			}
		},
		computed: {
			loginInfo() {
				return this.$store.state.loginInfo;
			},
			getKeMuId() {
				return this.$store.getters.getKeMuId;
			},
			getKeMuItem() {
				return this.$store.getters.getKeMuItem;
			},
			getKeMuParams() {
				return this.$store.getters.getKeMuParams;
			},
			homeDataUpdata() {
				return this.$store.state.homeDataUpdata;
			},
		},
		onLoad() {
			
		},
		onShow(){
			this.requestInit();
		},
		mounted() {
			
		},
		methods: {
			goLogin(){
				this.aiModalShow=false;
				uni.reLaunch({ url: '/pagesB/login/login' })
			},
			bindCallback(){
				setTimeout(()=>{
					this.requestInit()
				},500)
			},
			aiClick(){
				if(this.aiText.type==1){
					uni.navigateTo({//章节强化
						url: `/pagesC/selectChapter/index`
					})
				}else if(this.aiText.type==2){
					uni.navigateTo({//每日提升
						url: `/pagesA/aiAccuracy/index?type=3`
					})
				}else if(this.aiText.type==3){
					uni.navigateTo({//错题攻克
						url: `/pagesA/aiAccuracy/index?type=1`
					})
				}else if(this.aiText.type==4){
					uni.navigateTo({//万人模考
						url: `/pagesA/aiAccuracy/index?type=4`
					})
				}else if(this.aiText.type==5){
					uni.navigateTo({//章节强化
						url: `/pagesC/selectChapter/index`
					})
				}else{
					uni.navigateTo({//每日提升
						url: `/pagesA/aiAccuracy/index?type=3`
					})
				}
			},
			getAiText(){
				let msg=[
					{type: 1,msg: '检测到您章节错题较多，今天先刷该章节基础题吧~'},
					{type: 2,msg: '恭喜学员坚持学习10天啦！继续加油哦~'},
					{type: 3,msg: '太棒了！您上次的错题攻略已经掌握80%，再巩固巩固就能全部吃透啦！'},
					{type: 4,msg: '距离考试还有25天，建议您每天用‘模拟考试’功能完整做1套题，保持手感~'},
					{type: 5,msg: '今天题目难度较高，建议先休息10分钟，明天从‘章节强化’模块简单题开始刷'},
					{type: 6,msg: '您今天的正确率比60%的考生都高！继续保持，下一个高分就是您~'},
				]
				let index=-1;
				const data=this.INDEXDATA;
				const recent=data.recentPractice || {};
				if(recent.error>0 && (recent.error/recent.num*100>40)){//单章节错题率＞40%
					index=0
					msg[0].msg=`检测到您${recent.charTitle}错题较多，今天先刷该章节基础题吧~`
				}else if(data.continue7 || data.todayCount>=20){//连续学习≥7天/ 单日刷题≥20道/ 正确率环比提升≥15%
					index=1
				}else if(data.errorReplayRate>=80){//错题攻克正确率≥80%
					index=2
				}else if(this.$common.getDaysFromDate(this.getKeMuItem.endTime)<=30){//距考试日期≤30天/ 用户设置的备考节点临近
					index=3
				}else if(data.todayRightPercent<30){//当日正确率＜30%且刷题时长＞60分钟
					index=4
					meg[4].msg=`距离考试还有${this.$common.getDaysFromDate(this.getKeMuItem.endTime)}天，建议您每天用‘模拟考试’功能完整做1套题，保持手感~`
				}else if(data.todayRightPercent>=60){//用户正确率超过60%以上
					index=5
				}
				console.log(msg,'--msg')
				index!=-1 && (this.aiText=msg[index]);
			},
			rightWork(){
				// #ifdef APP-PLUS
				if(this.$common.isEmpty(this.loginInfo)){//app 未登录，提示登录才能进行后续逻辑
					this.aiModalShow=true
					return
				}
				// #endif
				if(this.INDEXDATA.workCount<100){
					return uni.showToast({
						title: '请先完成100道题目后再试',
						icon: 'none'
					})
				}
				let passRate=this.splitNumber(this.INDEXDATA.passRate);
				uni.navigateTo({
					url: `/pagesC/statistics/report?subjectCount=${this.INDEXDATA.subjectCount}&workCount=${this.INDEXDATA.workCount}&passRate=${JSON.stringify(passRate)}`
				})
			},
			requestInit(){
				console.log(this.$common.isEmpty(this.getKeMuId),this.$common.isEmpty(this.loginInfo),'--------175')
				if(this.$common.isEmpty(this.getKeMuId))return;
				if(this.$common.isEmpty(this.loginInfo)){
					this.indexDataNotLogin()
				}else{
					this.indexData();
				}
			},
			indexDataNotLogin(){
				indexDataNotLogin(this.getKeMuParams).then(res=>{
					this.INDEXDATA=res.data || {};
					this.getAiText()
				})
			},
			indexData(){
				indexData(this.getKeMuParams).then(res=>{
					this.INDEXDATA=res.data || {};
					this.getAiText()
				})
			},
			goQuestion(tab){
				if(tab){
					this.$store.commit('set', ['questionDefaultTab',tab]);
				}
				uni.switchTab({
					url: '/pages/index/question'
				})
			},
			goMistakes(){
				// #ifdef APP-PLUS
				if(this.$common.isEmpty(this.loginInfo)){//app 未登录，提示登录才能进行后续逻辑
					this.aiModalShow=true
					return
				}
				// #endif
				uni.navigateTo({
					url: `/pagesC/topicRelated/mistakes`
				})
			},
			goAiAccuracy(){
				uni.navigateTo({
					url: `/pagesA/aiAccuracy/index?type=4`
				})
			},
			goToMini(){
				// #ifdef MP-WEIXIN
				uni.navigateToMiniProgram({
					appId: 'wx550e7f9a5a7910d3'
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.showToast({title: '暂不支持',icon: 'error'})
				// #endif
			},
			cutClick(){
				uni.navigateTo({
					url: `/pages/cutDrawer/index`
				})
			},
			splitNumber(n) {
				if(!n) return {}
			  const str = n.trim();
			  // 验证是否为有效数字格式
			  if (!/^-?\d*\.?\d+$/.test(str)) {
			    throw new Error('Invalid number format');
			  }
			  const parts = str.split('.'),
					integerPart = parts[0] || '0',
					decimalPart = parts[1] || '';
			  return {
			    integer: integerPart,
			    decimal: decimalPart ? '.'+decimalPart : decimalPart,
			  };
			},
			goAccuracy(type){
				// #ifdef APP-PLUS
				if(this.$common.isEmpty(this.loginInfo)){//app 未登录，提示登录才能进行后续逻辑
					this.aiModalShow=true
					return
				}
				// #endif
				if(type=='2'){
					return uni.navigateTo({
						url: `/pagesC/selectChapter/index`
					})
				}
				uni.navigateTo({
					url: `/pagesA/aiAccuracy/index?type=${type}`
				})
			},
			lineColor(num){
				num=Number(num);
				let styleInfo={
					className: '',
					t1: '',
					t2: '',
				}
				let className='';
				if(num<60){
					Object.assign(styleInfo,{
						className: 'lineColor1',
						t1: '考试通过可能性很低，',
						t2: '建议选择章节强化，逐步突破',
					})
				}else if(num<80){
					Object.assign(styleInfo,{
						className: 'lineColor2',
						t1: '考试通过率较低，',
						t2: '建议坚持每日提升，2-3日一次模拟考试',
					})
				}else if(num<=79 && num>=60){
					Object.assign(styleInfo,{
						className: 'lineColor3',
						t1: '考试通过率较高，',
						t2: '建议坚持保持每日提升，适当模拟考试',
					})
				}else{
					Object.assign(styleInfo,{
						className: 'lineColor1',
						t1: '',
						t2: '',
					})
				}
				return styleInfo
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 0 36rpx 26rpx;
		background: linear-gradient( 180deg, #FFE8CA 0%, #FFFEFC 34%, #FFFFFF 51%, #FFFFFF 100%);
	}
	.num-accuracy{
		display: flex;
		justify-content: space-between;
		margin: 18rpx 0 12rpx;
		font-size: 32rpx;
		color: #6B6B6B;
		.num,.accuracy{
			display: flex;
		}
		.n{
			color: #F8935A;
		}
		.accuracy{
			flex-shrink: 0;
			align-items: center;
		}
		.img{
			width: 29rpx;
			height: 29rpx;
			margin-right: 2rpx;
		}
	}
	.swiper{
		flex: 1;
		height: auto;
		.swiper-item{
			display: flex;
		}
	}
	.passing-rate{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
		overflow: hidden;
		.num{
			display: flex;
			align-items: baseline;
			font-size: 24rpx;
			color: #111;
			.n{
				font-size: 56rpx;
			}
		}
		.rate-con{
			align-items: baseline;
			margin-bottom: 22rpx;
			color: #111;
			font-size: 32rpx;
			&,.rate{
				display: flex;
			}
			.rate{
				align-items: baseline;
				margin-left: 16rpx;
				color: #FB4F51;
				font-size: 28rpx;
			}
			.big{
				font-size: 56rpx;
			}
		}
	}
	.line-style{
		position: relative;
		height: 14rpx;
		margin-bottom: 14rpx;
		background: linear-gradient( 180deg, #F83A3A 0%, #FB4E50 50%, #F9595B 100%);
		border-radius: 8rpx;
		.r{
			position: absolute;
			top: -13rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: #F55255;
			border-radius: 50%;
			&::before,&::after{
				content: "";
				position: absolute;
				top: 50%;
				left: 50%
			}
			&::before{
				width: 20rpx;
				height: 20rpx;
				margin: -10rpx 0 0 -10rpx;
				background-color: #fff;
				border-radius: 50%;
			}
			&::after{
				width: 4rpx;
				height: 10rpx;
				margin: -5rpx 0 0 -2rpx;
				background-color: #F85359;
			}
		}
		&.lineColor2{
			background: #FEBB7C;
			.r{
				&,&::after{
					background-color: #FEBB7C;
				}
			}
		}
		&.lineColor3{
			background: #48CA8C;
			.r{
				&,&::after{
					background-color: #48CA8C;
				}
			}
		}
	}
	.forecast-msg{
		margin-bottom: 70rpx;
		font-size: 24rpx;
		color: #888;
		.s{
			color: #D6494C;
		}
	}
	.ai-accuracy{
		position: relative;
		margin-bottom: 56rpx;
		padding: 54rpx 0 34rpx 0;
		background-color: #FEFEFC;
		box-shadow: 6rpx 6rpx 60rpx 2rpx rgba(0,0,0,0.11);
		border-radius: 30rpx;
		.svg-img{
			position: absolute;
			left: 48rpx;
			bottom: 230rpx;
			.img{
				width: 120rpx;
				height: 200rpx;
			}
			.text{
				position: absolute;
				top: 10rpx;
				left: 150rpx;
				z-index: 1;
				width: 500rpx;
				// min-width: 370rpx;
				padding: 16rpx 30rpx;
				// white-space: nowrap;
				background-color: #A4DCB5;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #fff;
				&::before{
					content: "";
					position: absolute;
					z-index: -1;
					left: -40rpx;
					top: -30rpx;
					width: 0;
					height: 0;
					border-left: 40px solid transparent;
					border-right: 40px solid transparent;
					border-bottom: 20px solid #A4DCB5; /* 调整颜色 */
					border-top: 20px solid transparent;
					transform: rotate(-16deg);
				}
			}
		}
		.title{
			display: flex;
			align-items: baseline;
			justify-content: center;
			padding-left: 140rpx;
			margin-bottom: 28rpx;
			.left{
				margin-right: 60rpx;
				color: #D95F21;
				font-size: 34rpx;
				font-weight: bold;
			}
			.right{
				position: relative;
				display: flex;
				align-items: center;
				color: #F0AE5D;
				font-size: 24rpx;
				cursor: pointer;
				&::after{
					display: none;
					content: "";
					position: absolute;
					top: -10rpx;
					right: -22rpx;
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					background-color: #FA5151;
				}
				&.meet{
					&::after{
						display: block;
					}
				}
			}
			.iconfont{
				margin-top: -2rpx;
				font-size: 20rpx;
			}
		}
		.message{
			margin-bottom: 22rpx;
			text-align: center;
			font-size: 28rpx;
			color: #222;
		}
		.list{
			display: flex;
			justify-content: center;
			.item{
				margin-right: 110rpx;
				cursor: pointer;
				text-align: center;
				font-size: 26rpx;
				color: #111;
				&:last-child{
					margin-right: 0;
					.img{
						width: 106rpx;
						margin-left: 30rpx;
					}
				}
				&:nth-child(2){
					.img{
						width: 86rpx;
						margin-left: 16rpx;
					}
					.num{
						top: 10rpx;
						color: #fff;
					}
				}
			}
			.img-text{
				position: relative;
			}
			.num{
				position: absolute;
				top: 2rpx;
				right: 0;
				z-index: 1;
				width: 40rpx;
				font-size: 16rpx;
				font-weight: 600;
				color: #3BA9BA;
			}
			.img{
				display: block;
				width: 90rpx;
				height: 88rpx;
				margin: 0 0 30rpx 20rpx;
			}
		}
	}
	.selection{
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 28rpx;
			.left{
				color: #111;
				font-size: 40rpx;
				font-weight: bold;
			}
			.right{
				display: flex;
				align-items: center;
				color: #A2A2A2;
				line-height: 22rpx;
				font-size: 22rpx;
				cursor: pointer;
			}
		}
		.list-block{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 322rpx;
				height: 122rpx;
				margin-bottom: 26rpx;
				overflow: hidden;
				cursor: pointer;
				border-radius: 20rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				&:nth-child(1){
					height: 152rpx;
					background: linear-gradient( 229deg, #87A8FC 0%, #BBD2FB 100%);
				}
				&:nth-child(2){
					height: 152rpx;
					color: #DD754E;
					background: linear-gradient( 229deg, #FDCAAF 0%, #FDE1D9 100%);
				}
				&:nth-child(3){
					color: #3896B2;
					background-color: #EAF7FF;
					.img{
						width: 45.7rpx;
						margin-right: 16rpx;
					}
				}
				&:nth-child(4){
					color: #C17131;
					background-color: #FFF2E9;
					.img{
						width: 50rpx;
						margin-right: 14rpx;
					}
				}
				&:nth-child(5){
					justify-content: flex-start;
					width: 538rpx;
					padding-left: 40rpx;
					background: linear-gradient( 165deg, #FFB57D 0%, #FDC57C 100%);
					.text{
						margin-top: 8rpx;
						font-size: 20rpx;
						font-weight: 400;
					}
					.img{
						width: 58rpx;
						margin-right: 30rpx;
					}
				}
				&:nth-child(6){
					width: 122rpx;
					padding: 0 10rpx;
					text-align: center;
					background: linear-gradient( 165deg, #79ECEA 0%, #43DBE4 100%);
				}
			}
			.img{
				width: 52rpx;
				margin-right: 14rpx;
			}
		}
	}
</style>
